<template>
  <div class="payment-container">
    <el-card class="payment-card">
      <template #header>
        <div class="payment-header">
          <h2>订单支付</h2>
          <div class="payment-amount">¥{{ orderAmount.toFixed(2) }}</div>
        </div>
      </template>

      <div class="payment-content">
        <div class="order-info">
          <p>订单号：{{ orderNumber }}</p>
          <p>创建时间：{{ createTime }}</p>
        </div>

        <div class="payment-methods">
          <h3>选择支付方式</h3>
          <el-radio-group v-model="paymentMethod">
            <el-radio label="wechat">
              <i class="fab fa-weixin"></i> 微信支付
            </el-radio>
            <el-radio label="alipay">
              <i class="fab fa-alipay"></i> 支付宝
            </el-radio>
          </el-radio-group>
        </div>

        <div class="payment-action">
          <el-button
            type="primary"
            size="large"
            :loading="paying"
            @click="handlePay"
          >
            立即支付
          </el-button>
        </div>

        <!-- 支付二维码弹窗 -->
        <el-dialog
          v-model="showQRCode"
          title="扫码支付"
          width="300px"
          center
          align-center
        >
          <div class="qrcode-content">
            <div class="qrcode-image">
              <!-- 这里用一个示例二维码图片 -->
              <img src="https://example.com/qrcode.png" alt="支付二维码" />
            </div>
            <div class="qrcode-amount">¥{{ orderAmount.toFixed(2) }}</div>
            <div class="qrcode-tip">
              请使用{{ paymentMethod === "wechat" ? "微信" : "支付宝" }}扫码支付
            </div>
          </div>
          <template #footer>
            <el-button @click="cancelPay">取消支付</el-button>
            <el-button type="primary" @click="simulatePaymentSuccess">
              模拟支付成功
            </el-button>
          </template>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();

// 支付相关数据
const orderAmount = ref(1998.0);
const orderNumber = ref("ORDER202403150001");
const createTime = ref("2024-03-15 14:30:00");
const paymentMethod = ref("wechat");
const paying = ref(false);
const showQRCode = ref(false);

// 处理支付
const handlePay = () => {
  if (!paymentMethod.value) {
    ElMessage.warning("请选择支付方式");
    return;
  }
  showQRCode.value = true;
};

// 取消支付
const cancelPay = () => {
  showQRCode.value = false;
  ElMessage.info("已取消支付");
};

// 模拟支付成功
const simulatePaymentSuccess = () => {
  paying.value = true;
  setTimeout(() => {
    paying.value = false;
    showQRCode.value = false;
    ElMessage.success("支付成功");
    router.push("/orders");
  }, 1500);
};
</script>

<style scoped>
.payment-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-amount {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.order-info {
  color: #666;
  margin-bottom: 30px;
}

.payment-methods {
  margin-bottom: 30px;
}

.payment-methods h3 {
  margin-bottom: 15px;
}

.payment-action {
  text-align: center;
  margin-top: 30px;
}

.qrcode-content {
  text-align: center;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-amount {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 10px;
}

.qrcode-tip {
  color: #666;
  font-size: 14px;
}

:deep(.el-radio) {
  margin-right: 30px;
  margin-bottom: 15px;
}

:deep(.el-dialog__body) {
  padding-top: 20px;
}
</style> 